window.onload = function() {
    //配置
    var config = {
        vx: 4, //小球x轴速度,正为右，负为左
        vy: 4, //小球y轴速度
        height: 2, //小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200, //点个数
        color: "200, 193, 193", //点颜色
        stroke: "0,0,0", //线条颜色
        dist: 6000, //点吸附距离
        e_dist: 20000, //鼠标吸附加速距离
        max_conn: 10 //点到点最大连接数
    }

    //调用
    CanvasParticle(config);

};

// 扫码测试
let qrcodeBox = document.querySelector('.qrcode-box');
let initialize = document.querySelector('.initialize');
initialize.addEventListener('mouseover', function() {
    qrcodeBox.style.height = '120px';
})

initialize.addEventListener('mouseout', function() {
    qrcodeBox.style.height = '0px';
})



let testLink = document.querySelector('.test-link');
// 身份验证
// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "4000次", price: "1200", unitprice: '0.3000' },
    { name: "8000次", price: "2000", unitprice: '0.2500' },
    { name: "12000次", price: "8000", unitprice: '0.2000' },
];
// 保存组装好的数据
let apiHtml = '';
// 遍历数组apiTypeData，将name属性值组装成html代码，组装好后放进link
apiTypeData.forEach(function(v, i) {
    if (i == 0) {
        apiHtml = `<li class='act' data-price='${v.price}' data-unitprice='${v.unitprice}'>${v.name}</li>`
        return;
    };
    apiHtml += `<li  data-price='${v.price}' data-unitprice='${v.unitprice}'>${v.name}</li>`;

});
// console.log(apiHtml);

testLink.innerHTML += apiHtml;
let int = 1;
let price = document.querySelector('.price');
let unit = document.querySelector('.unit');
let testLinkA = document.querySelectorAll('.test-link li')
testLinkA.forEach(function(x, y) {
    x.addEventListener('click', function() {
        testLinkA[int].classList.remove('act');
        this.classList.add('act');
        int = y;
        price.textContent = this.dataset.price;
        unit.textContent = this.dataset.unitprice;
        // console.log(price.textContent);
    })

})


// let menuItem = document.querySelectorAll('.menu-item');
// let contItem = document.querySelectorAll('.cont-item');
// let index = 0;
// menuItem.forEach(function(dom, i) {
//     dom.addEventListener('click', function() {
//         menuItem[index].classList.remove('active'); //清除上一个菜单的激活样式
//         dom.classList.add('active'); //给当前添加激活样式

//         contItem[index].classList.remove('block'); //清除上一个内容的激活样式
//         contItem[i].classList.add('block'); //显示当前菜单对应的内容
//         index = i; //当前索引i赋值给index

//     })
// });